<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxdemo</title>

<!-- 删除表格信息，模态框 -->



<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="${basePath}static/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${basePath}static/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />

<link
	href="${basePath}static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css"
	href="${basePath}static/paginationjs-master-2.1.0/dist/pagination.css" />
<!--引入jquery-->
<script type="text/javascript"
	src="${basePath}static/js/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="${basePath}static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript"
	src="${basePath}static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>


<script type="text/javascript">
	// 使用jquery进行ajax处理
	function doAjaxQuery() {

		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "AjaxShoppingAction", // 请求的url
			data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) {

				// 执行成功之后的回调函数
				// 回调函数的dom操作

				// 解析json数据
				console.info(data);

				// 将ajax查询的结果进行分页处理
				doPaging(data, 5);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */

			},
			error : function(data) {
				alert("查询失败" + data);
			}
		});
	}

	// 分页处理
	function doPaging(data, pagesize) {

		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize = 5; // 默认页面大小为5条记录
		}
		console.info("pagesize:" + pagesize);
		// 获取显示分页控件的div
		$('#querypager')
				.pagination(
						{
							dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
							pageSize : pagesize,// 每页显示的记录条数
							showGoInput : true, // 是否显示goin按钮
							showGoButton : true,
							callback : function(data, pagination) {
								console.info(pagination);
								// 分页处理
								// 解析拼写的html内容
								var strHtml = "";
								$
										.each(
												data,
												function(index, eachVal) {
													strHtml += "<tr>";

													strHtml += "<th scope='row'>";
													strHtml += (index + 1);
													strHtml += "</th>";

													strHtml += "<td>";
													strHtml += eachVal.usertel;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.phoneid;
													strHtml += "</td>";

													strHtml += "<td>";
													strHtml += eachVal.ordernumber;
													strHtml += "</td>";
													
													strHtml += "</tr>";
												});

								// 把解析的html内容，使用dom操作赋值到表格中
								$("#displaytbody").html(strHtml);
							}
						})
	}
</script>
</head>
<body>
	<form id="form1" class="form-horizontal" action="AjaxQueryAdminAction"
		method="post">
		<div class="form-group" style="margin-top: 100px;">
			<label class="col-sm-2 control-label col-sm-offset-2">管理员</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="txtUserName"
					name="adminname" placeholder="请输入管理名">
			</div>
			<button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-8">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>用户id</th>
							<th>商品编号</th>
							<th>订单编号</th>
							
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7">
				<div class="inner-left preview" id="querypager"></div>
			</div>
		</div>
		<!-- /example -->
	</form>


</body>
</html>